<template>
    <div class="global">
        <div style="margin-bottom: 10px;">


            <el-button type="success" @click="add()" style="float: right;" plain>新增</el-button>
        </div>

        <div class="table">
            <el-table :data="tableData" stripe>
                <el-table-column type="index" width="100" label="序号" align="center" sortable></el-table-column>

                <el-table-column prop="name" label="试卷名称">

                </el-table-column>
                <el-table-column prop="username" label="答题人">
                </el-table-column>
                <el-table-column prop="cover" label="封面">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <el-image v-if="scope.row.cover != null && scope.row.cover != ''" :src="scope.row.cover"
                                preview-teleported :preview-src-list="[scope.row.cover]"
                                style="width: 50px;height: 50px;" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createtime" label="发放时间">
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <div>
                            <el-tag type="warning" v-if="scope.row.status == 0">未完成</el-tag>
                            <el-tag type="success" v-if="scope.row.status == 1">已完成</el-tag>
                        </div>
                    </template>
                </el-table-column>


                <el-table-column label="操作" align="center" width="300" fixed="right">
                    <template v-slot="scope">
                        <el-button size="mini" type="primary" v-if="scope.row.status == 1" plain
                            @click="detail(scope.row.pid, scope.row.uid)">详情</el-button>

                        <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination" style="margin-top: 10px;display: flex;justify-content: right;">
                <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.pageNo"
                    :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout=" prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>

        <el-dialog title="发放信息" v-model="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
            <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">

                <el-form-item label="试卷" prop="pid">
                    <el-select v-model="form.pid" placeholder="请选择所属问卷">
                        <el-option v-for="item in paperlist" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户" prop="uid">
                    <el-select v-model="form.uid" placeholder="请选择用户">
                        <el-option v-for="item in userlist" :label="item.username" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
                <el-button @click="fromVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from '@element-plus/icons-vue'
import { onMounted, readonly, ref } from "vue";
import service from "../request/Request";
import router from "../router";
const keyword = ref("")
const fromVisible = ref(false)
const form = ref({});
const paperlist = ref([])
const userlist = ref([])
const rules = {

    pid: [
        { required: true, message: '请选择试卷', trigger: 'change' },
    ],
    uid: [
        { required: true, message: '请选择用户', trigger: 'change' },

    ],

}
const formRef = ref();
const edit = (row) => {
    form.value = row
    form.value.cover = form.value.cover == null ? '' : form.value.cover
    fromVisible.value = true
}
const getall1 = async () => {
    const res = await service.get("/paper/all");
    console.log(res)
    paperlist.value = res.data
}
const save = () => {
    formRef.value.validate(async (valid) => {
        console.log(valid)
        if (valid) {

            let url = form.value.id ? "/paper/edit" : "/paperuser/add";
            const res = await service.post(url,
                form.value
            )
            console.log(res)
            if (res.code == 200) {
                getlist()
                fromVisible.value = false
                ElMessage({
                    message: res.msg,
                    type: "success"
                })
            }
        }

    })

}
const typedata = ref([])
const avatar = ref("")
const queryform = ref({

    pageNo: 1,
    pageSize: 10,
    keyword: ""
});
const tableData = ref([])
const total = ref(0)
const handleCurrentChange = (e) => {
    queryform.value.pageNo = e;
    getlist()
}
const add = () => {
    fromVisible.value = true
    form.value = {}
    form.value.cover = ""
    console.log("1233")
}
const detail = (id, uid) => {
    router.push({
        path: "/dtdetail",
        query: {
            id: id,
            uid: uid
        }
    })

}
onMounted(() => {
    getlist()
    getall()
    getall1()
})
const getall = async () => {
    const res = await service.get("/user");
    console.log(res)
    userlist.value = res.data
}
const search = () => {
    queryform.value.pageNo = 1;
    getlist()
}
const research = () => {
    queryform.value = {}
    queryform.value.pageNo = 1;
    queryform.value.pageSize = 10;
    queryform.value.type = ""
    getlist()
}
const handleAvatarSuccess = (e) => {
    form.value.cover = e.data
}
const publish = (row) => {
    ElMessageBox.confirm(
        `是否确认${row.status == 0 ? '发布' : '取消发布'}？`,
        '确认信息',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await service.post("/paper/publish", { id: row.id })
            if (res.code == 200) {
                ElMessage({
                    type: "success",
                    message: "成功"
                })
                getlist()
            }

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'canceled',
            })
        })
}
const del = (id) => {
    ElMessageBox.confirm(
        '是否确认删除？',
        '确认信息',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await service.post("/paperuser/delete", { id: id })
            if (res.code == 200) {
                ElMessage({
                    type: "success",
                    message: "成功"
                })
                getlist()
            }

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
const getlist = async () => {
    const res = await service.post("/paperuser/list", queryform.value
    )
    console.log(res)
    tableData.value = res.data.records
    total.value = res.data.total
}

</script>
<style scoped>
.global {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px !important;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>